<template>
    <div class="home">
        <div class="card-content">
            <div class="card-content-1">
                <div class="card-box-1">
                    <div
                        v-for="(item, index) in cardData1"
                        :key="index"
                        class="card-item"
                        :style="{
                            backgroundImage: `linear-gradient(to bottom right, ${item.startColor}, ${item.endColor})`,
                        }"
                    >
                        <div class="card-item-title">{{ item.title }}</div>
                        <div class="card-item-main">
                            <div :class="[item.icon, 'card-item-icon']"></div>
                            <div class="card-item-num">{{ item.num }}</div>
                        </div>
                    </div>
                </div>
                <div class="card-box-2">
                    <div class="tip">
                        <div class="i-material-symbols:align-justify-flex-start tip-icon"></div>
                        <div class="tip-title">快捷入口</div>
                    </div>
                    <el-divider class="divider" />

                    <div class="card-box-2-box">
                        <div v-for="(item, index) in cardData2" :key="index" class="">
                            <div
                                class="card-2-box"
                                :style="{
                                    backgroundImage: `linear-gradient(to bottom right, ${item.startColor}, ${item.endColor})`,
                                }"
                            >
                                <div :class="[item.icon, 'card-2-icon']"></div>
                            </div>
                            <div class="card-2-title">{{ item.title }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-content-2">
                <img src="@/assets/img/avatar.png" class="avatar" />
                <div class="person-information-1">管理员</div>
                <div class="person-information-1">上次登陆时间：2020-01-01</div>
            </div>
        </div>
        <div class="chart-content">
            <div class="tip">
                <div class="i-material-symbols:align-justify-flex-start tip-icon"></div>
                <div class="tip-title">逝者信息</div>
            </div>
            <el-divider class="divider" />
            <div class="chart-main-1">
                <div style="width: 50%; box-sizing: border-box; padding-right: 1vw">
                    <div class="tip">
                        <div class="i-material-symbols:align-justify-flex-start tip-icon"></div>
                        <div class="tip-title">正在守灵逝者信息</div>
                    </div>
                    <!-- <el-divider class="divider" /> -->
                    <el-table
                        ref="tableRef"
                        :data="tableObj1?.tableData"
                        border
                        stripe
                        fit
                        show-header
                        :height="tableObj1.tableHeight"
                        :max-height="tableObj1.tableMaxHeight"
                        :default-sort="tableObj1.tableDefaultSort"
                        :summary-method="tableObj1.tableSummaryMethod"
                        :span-method="tableObj1.tableSpanMethod"
                        table-layout="fixed"
                        class="my-table"
                    >
                        <el-table-column
                            v-for="(item, index) in tableObj1.tableColumn"
                            :key="`${index}`"
                            :prop="item.tableProp"
                            :label="item.tableLabel"
                            :width="item.tableWidth"
                        ></el-table-column>
                    </el-table>
                    <el-pagination
                        v-model:current-page="paginationObj1.paginationCurrentPage"
                        :pager-count="paginationObj1.paginationPagerCount"
                        v-model:page-size="paginationObj1.paginationPageSize"
                        :page-sizes="paginationObj1.paginationPageSizes"
                        size="default"
                        background
                        :layout="paginationObj1.paginationLayout"
                        :total="paginationObj1.paginationTotal"
                        class="pagination"
                        @size-change="paginationObj1.paginationSizeChange"
                        @current-change="paginationObj1.paginationCurrentChange"
                    ></el-pagination>
                </div>
                <div style="width: 50%">
                    <div class="tip">
                        <div class="i-material-symbols:align-justify-flex-start tip-icon"></div>
                        <div class="tip-title">正在冷藏逝者信息</div>
                    </div>
                    <!-- <el-divider class="divider" /> -->
                    <el-table
                        ref="tableRef"
                        :data="tableObj2?.tableData"
                        border
                        stripe
                        fit
                        show-header
                        :height="tableObj2.tableHeight"
                        :max-height="tableObj2.tableMaxHeight"
                        :default-sort="tableObj2.tableDefaultSort"
                        :summary-method="tableObj2.tableSummaryMethod"
                        :span-method="tableObj2.tableSpanMethod"
                        table-layout="fixed"
                        class="my-table"
                    >
                        <el-table-column
                            v-for="(item, index) in tableObj2.tableColumn"
                            :key="`${index}`"
                            :prop="item.tableProp"
                            :label="item.tableLabel"
                            :width="item.tableWidth"
                        ></el-table-column>
                    </el-table>
                    <el-pagination
                        v-model:current-page="paginationObj2.paginationCurrentPage"
                        :pager-count="paginationObj2.paginationPagerCount"
                        v-model:page-size="paginationObj2.paginationPageSize"
                        :page-sizes="paginationObj2.paginationPageSizes"
                        size="default"
                        background
                        :layout="paginationObj2.paginationLayout"
                        :total="paginationObj2.paginationTotal"
                        class="pagination"
                        @size-change="paginationObj2.paginationSizeChange"
                        @current-change="paginationObj2.paginationCurrentChange"
                    ></el-pagination>
                </div>
            </div>
        </div>
        <div class="chart-content">
            <div class="tip">
                <div class="i-material-symbols:align-justify-flex-start tip-icon"></div>
                <div class="tip-title">统计分析</div>
            </div>
            <el-divider class="divider" />
            <div class="chart-main-2">
                <div id="chart1Id" style="height: 520px; width: 100%"></div>
                <div id="chart2Id" style="height: 520px; width: 100%"></div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    // 引入 ECharts 核心模块
    import * as echarts from 'echarts/core';
    // 引入图表组件（按实际需要）
    import { BarChart, PieChart, LineChart } from 'echarts/charts';
    // 引入基础组件（基本上都需要）
    import {
        TooltipComponent,
        LegendComponent,
        TitleComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
    } from 'echarts/components';
    // 引入功能组件（按实际需要）
    import { LabelLayout, UniversalTransition } from 'echarts/features';
    // 引入渲染器（必须）
    import { CanvasRenderer } from 'echarts/renderers';
    import { ref, shallowRef, onMounted, onBeforeUnmount } from 'vue';
    import type { Ref, Raw } from 'vue';
    // import { difficultyChildGetChildListApi } from '@/apis';
    // import { ElMessage, ElMessageBox } from 'element-plus';

    // 注册 echarts 需要的组件
    echarts.use([
        BarChart,
        PieChart,
        LineChart,
        TooltipComponent,
        LegendComponent,
        TitleComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
        LabelLayout,
        UniversalTransition,
        CanvasRenderer,
    ]);
    const cardData1: Ref<any> = ref([
        {
            title: '今日登记',
            icon: 'i-ant-design:bar-chart-outlined',
            num: '9527',
            startColor: '#ec4786',
            endColor: '#b955a4',
        },
        {
            title: '今日火化',
            icon: 'i-material-symbols:local-fire-department-rounded',
            num: '9527',
            startColor: '#865ec0',
            endColor: '#5144b4',
        },
        {
            title: '今日结算',
            icon: 'i-ant-design:money-collect-outlined',
            num: '9527',
            startColor: '#56cdf3',
            endColor: '#719de3',
        },
        {
            title: '今日守灵',
            icon: 'i-material-symbols:countertops-outline-rounded',
            num: '9527',
            startColor: '#fcbc25',
            endColor: '#f68057',
        },
    ]);
    const cardData2: Ref<any> = ref([
        {
            title: '今日登记',
            icon: 'i-ant-design:bar-chart-outlined',
            num: '9527',
            startColor: '#ec4786',
            endColor: '#b955a4',
        },
        {
            title: '今日火化',
            icon: 'i-material-symbols:local-fire-department-rounded',
            num: '9527',
            startColor: '#865ec0',
            endColor: '#5144b4',
        },
        {
            title: '今日结算',
            icon: 'i-ant-design:money-collect-outlined',
            num: '9527',
            startColor: '#56cdf3',
            endColor: '#719de3',
        },
        {
            title: '今日守灵',
            icon: 'i-material-symbols:countertops-outline-rounded',
            num: '9527',
            startColor: '#fcbc25',
            endColor: '#f68057',
        },
    ]);

    const tableChart1Data1: Ref<any> = ref([
        { name: '1月', value: 100 },
        { name: '2月', value: 400 },
        { name: '3月', value: 600 },
        { name: '4月', value: 2000 },
        { name: '5月', value: 300 },
        { name: '6月', value: 1500 },
        { name: '7月', value: 300 },
        { name: '8月', value: 500 },
        { name: '9月', value: 300 },
        { name: '10月', value: 400 },
        { name: '11月', value: 300 },
        { name: '12月', value: 600 },
    ]);
    const tableChart1Data2: Ref<any> = ref([
        { name: '1月', value: 300 },
        { name: '2月', value: 800 },
        { name: '3月', value: 700 },
        { name: '4月', value: 1000 },
        { name: '5月', value: 500 },
        { name: '6月', value: 100 },
        { name: '7月', value: 300 },
        { name: '8月', value: 600 },
        { name: '9月', value: 200 },
        { name: '10月', value: 900 },
        { name: '11月', value: 600 },
        { name: '12月', value: 400 },
    ]);
    const tableChart2Data1: Ref<any> = ref([
        { name: '0~10岁', value: 100 },
        { name: '11~20岁', value: 400 },
        { name: '21~30岁', value: 600 },
        { name: '31~40岁', value: 2000 },
        { name: '41~50岁', value: 300 },
        { name: '51~60岁', value: 1500 },
        { name: '61~70岁', value: 300 },
        { name: '71~80岁', value: 300 },
        { name: '81~90岁', value: 300 },
        { name: '91~100岁', value: 300 },
        { name: '101~110岁', value: 300 },
        { name: '111~120岁', value: 300 },
    ]);
    const tableChart2Data2: Ref<any> = ref([
        { name: '0~10岁', value: 100 },
        { name: '11~20岁', value: 500 },
        { name: '21~30岁', value: 800 },
        { name: '31~40岁', value: 1000 },
        { name: '41~50岁', value: 600 },
        { name: '51~60岁', value: 500 },
        { name: '61~70岁', value: 400 },
        { name: '71~80岁', value: 100 },
        { name: '81~90岁', value: 500 },
        { name: '91~100岁', value: 600 },
        { name: '101~110岁', value: 700 },
        { name: '111~120岁', value: 300 },
    ]);
    const chart1: Ref<any> = shallowRef();
    const chart2: Ref<any> = shallowRef();
    const resizeFun = () => {
        chart1.value.resize();
        chart2.value.resize();
    };
    const isLoading1: Ref<boolean> = ref(false); //
    const tableObj1: Ref<any> = ref({
        tableData: [],
        tableColumn: [
            {
                tableProp: '', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '序号', //显示的标题
                tableWidth: '100', //对应列的宽度
                tableType: 'index', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },

            {
                tableProp: 'tingname', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '守灵厅', //显示的标题
                tableWidth: '100', //对应列的宽度
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },
            {
                tableProp: 'healthStatus', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '状态', //显示的标题
                tableWidth: '100', //对应列的宽度
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },
            {
                tableProp: 'type', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '外运', //显示的标题
                tableWidth: '100', //对应列的宽度
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },
            {
                tableProp: 'name', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '逝者姓名', //显示的标题
                tableWidth: '100', //对应列的宽度
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },
            {
                tableProp: 'idNumber', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '身份证号', //显示的标题
                tableWidth: '100', //对应列的宽度
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },
            {
                tableProp: 'gender', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '性别', //显示的标题
                tableWidth: '100', //对应列的宽度
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },

            {
                tableProp: 'expression', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '亲属姓名', //显示的标题
                tableWidth: '100', //对应列的宽度
                tableMinWidth: '250', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },
            {
                tableProp: 'phone', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '联系电话', //显示的标题
                tableWidth: '100', //对应列的宽度
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },
            {
                tableProp: 'basicLivingMoney', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '守灵进厅时间', //显示的标题
                tableWidth: '120', //对应列的宽度
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },
            {
                tableProp: 'disabledSubsidyMoney', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '守灵出厅时间', //显示的标题
                tableWidth: '120', //对应列的宽度
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },
            {
                tableProp: 'applyName', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '告别厅', //显示的标题
                tableWidth: '100', //对应列的宽度
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },
        ],
    });

    const paginationObj1: Ref<any> = ref({
        paginationTotal: 0, //总条目数
        paginationPageSize: 100, //每页默认的条目个数，不设置时默认为10
        paginationCurrentPage: 1, //当前页数
        paginationPageSizes: [100, 200, 300, 400], //展示的选择每页显示个数的选项，[100, 200, 300, 400] 表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。
        paginationLayout: 'slot, total, sizes, prev, pager, next, jumper', //prev (上一页按钮), next (下一页按钮), pager (分页列表), jumper (跳转), total (总计), sizes (每页条数选择), slot(插槽) 和 -> (every element after this symbol will be pulled to the right).
        paginationPagerCount: 11, //设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
        paginationSizeChange: (val: number) => {
            //处理页码大小
            tableSearch1();
        },
        paginationCurrentChange: (val: number) => {
            //当前页变动时候触发的事件
            tableSearch1();
        },
    });
    // 根据条件查询列表
    const tableSearch1 = (val?: any) => {
        // isLoading1.value = true;
        // difficultyChildGetChildListApi({
        //     pageNo: paginationObj1.value.paginationCurrentPage,
        //     pageSize: paginationObj1.value.paginationPageSize,
        //     notNeedPage: false,
        //     sortDir: '', //排序方式：ascending,descending
        //     sortField: '', //排序字段
        //     status: '办结',
        // })
        //     .then((res: any) => {
        //         paginationObj1.value.paginationTotal = res.data.totalElements;
        //         tableObj1.value.tableData = res.data.content;
        //     })
        //     .catch((err) => {
        //         // ElMessage.closeAll()
        //         // ElMessage({
        //         //     type: 'error',
        //         //     message: '系统异常，请稍后重试！',
        //         // })
        //     })
        //     .finally(() => {
        //         isLoading1.value = false;
        //     });
    };

    const isLoading2: Ref<boolean> = ref(false); //
    const tableObj2: Ref<any> = ref({
        tableData: [],
        tableColumn: [
            {
                tableProp: '', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '序号', //显示的标题
                tableWidth: '100', //对应列的宽度
                tableType: 'index', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },

            {
                tableProp: 'lengcangname', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '冷藏室', //显示的标题
                tableWidth: '100', //对应列的宽度
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },
            {
                tableProp: 'name', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '逝者姓名', //显示的标题
                tableWidth: '100', //对应列的宽度
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },
            {
                tableProp: 'idNumber', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '身份证号', //显示的标题
                tableWidth: '100', //对应列的宽度
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },
            {
                tableProp: 'gender', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '性别', //显示的标题
                tableWidth: '100', //对应列的宽度
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },
            {
                tableProp: 'healthStatus', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '状态', //显示的标题
                tableWidth: '100', //对应列的宽度
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },
            {
                tableProp: 'type', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '外运', //显示的标题
                tableWidth: '100', //对应列的宽度
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },
            {
                tableProp: 'expression', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '亲属姓名', //显示的标题
                tableWidth: '100', //对应列的宽度
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },
            {
                tableProp: 'phone', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '联系电话', //显示的标题
                tableWidth: '100', //对应列的宽度
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },
            {
                tableProp: 'basicLivingMoney', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '守灵进厅时间', //显示的标题
                tableWidth: '120', //对应列的宽度
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },
            {
                tableProp: 'disabledSubsidyMoney', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '守灵出厅时间', //显示的标题
                tableWidth: '120', //对应列的宽度
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },
            {
                tableProp: 'applyName', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '告别厅', //显示的标题
                tableWidth: '100', //对应列的宽度
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            },
        ],
    });
    const paginationObj2: Ref<any> = ref({
        paginationTotal: 0, //总条目数
        paginationPageSize: 100, //每页默认的条目个数，不设置时默认为10
        paginationCurrentPage: 1, //当前页数
        paginationPageSizes: [100, 200, 300, 400], //展示的选择每页显示个数的选项，[100, 200, 300, 400] 表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。
        paginationLayout: 'slot, total, sizes, prev, pager, next, jumper', //prev (上一页按钮), next (下一页按钮), pager (分页列表), jumper (跳转), total (总计), sizes (每页条数选择), slot(插槽) 和 -> (every element after this symbol will be pulled to the right).
        paginationPagerCount: 11, //设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
        paginationSizeChange: (val: number) => {
            //处理页码大小
            tableSearch2();
        },
        paginationCurrentChange: (val: number) => {
            //当前页变动时候触发的事件
            tableSearch2();
        },
    });

    // 根据条件查询列表
    const tableSearch2 = (val?: any) => {
        // isLoading2.value = true;
        // difficultyChildGetChildListApi({
        //     pageNo: paginationObj2.value.paginationCurrentPage,
        //     pageSize: paginationObj2.value.paginationPageSize,
        //     notNeedPage: false,
        //     sortDir: '', //排序方式：ascending,descending
        //     sortField: '', //排序字段
        //     status: '办结',
        // })
        //     .then((res: any) => {
        //         paginationObj2.value.paginationTotal = res.data.totalElements;
        //         tableObj2.value.tableData = res.data.content;
        //     })
        //     .catch((err) => {
        //         // ElMessage.closeAll()
        //         // ElMessage({
        //         //     type: 'error',
        //         //     message: '系统异常，请稍后重试！',
        //         // })
        //     })
        //     .finally(() => {
        //         isLoading2.value = false;
        //     });
    };

    onMounted(() => {
        chart1.value = echarts.init(document.getElementById('chart1Id'));
        chart1.value.setOption({
            title: {
                text: '本年度集中守灵统计',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985',
                    },
                },
            },
            legend: {
                data: ['集中守灵', '非集中守灵'],
            },
            grid: {
                // top: '15%', // 调整顶部边距
                // left: '5%',
                // right: '5%',
                // bottom: '5%',
                // containLabel: true, // 确保刻度标签不会被裁剪
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: tableChart1Data1.value.map((item) => item.name),
                axisLabel: {
                    rotate: 45, // 倾斜45度
                    interval: 0, // 强制显示所有标签
                },
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    interval: 0, // 强制显示所有标签
                },
            },
            series: [
                {
                    color: '#8e9dff',
                    smooth: true, //平滑处理
                    // stack: 'Total', //数据堆叠
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0.25,
                                    color: '#8e9dff',
                                },
                                {
                                    offset: 1,
                                    color: '#fff',
                                },
                            ],
                        },
                    },
                    emphasis: {
                        focus: 'series',
                    },
                    name: '集中守灵',
                    data: tableChart1Data1.value.map((item) => item.value),
                    type: 'line',
                },
                {
                    color: '#26deca',
                    smooth: true, //平滑处理
                    // stack: 'Total', //数据堆叠
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0.25,
                                    color: '#26deca',
                                },
                                {
                                    offset: 1,
                                    color: '#fff',
                                },
                            ],
                        },
                    },
                    emphasis: {
                        focus: 'series',
                    },
                    name: '非集中守灵',
                    data: tableChart1Data2.value.map((item) => item.value),
                    type: 'line',
                },
            ],
        });

        chart2.value = echarts.init(document.getElementById('chart2Id'));
        chart2.value.setOption({
            title: {
                text: '本年度死亡年龄段统计',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985',
                    },
                },
            },
            legend: {
                data: ['男性', '女性'],
            },
            grid: {
                // top: '15%', // 调整顶部边距
                // left: '5%',
                // right: '5%',
                // bottom: '5%',
                // containLabel: true, // 确保刻度标签不会被裁剪
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: tableChart2Data1.value.map((item) => item.name),
                axisLabel: {
                    rotate: 45, // 倾斜45度
                    interval: 0, // 强制显示所有标签
                },
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    interval: 0, // 强制显示所有标签
                },
            },
            series: [
                {
                    // color: '#26deca',
                    barWidth: 10,
                    stack: 'Total', //数据堆叠
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#26deca' },
                            { offset: 0.5, color: '#2fcdbc' },
                            { offset: 1, color: '#21c1b0' },
                        ]),
                    },
                    emphasis: {
                        focus: 'series',
                    },
                    name: '女性',
                    data: tableChart2Data2.value.map((item) => item.value),
                    type: 'bar',
                },
                {
                    // color: '#8e9dff',
                    stack: 'Total', //数据堆叠
                    barWidth: 10,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#83bff6' },
                            { offset: 0.5, color: '#188df0' },
                            { offset: 1, color: '#188df0' },
                        ]),
                    },
                    emphasis: {
                        //高亮的图形样式和标签样式。
                        focus: 'series', //在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果；series焦当前高亮的数据所在的系列的所有图形
                    },
                    name: '男性',
                    data: tableChart2Data1.value.map((item) => item.value),
                    type: 'bar',
                },
            ],
        });
        window.addEventListener('resize', resizeFun);

        tableSearch1();
        tableSearch2();
    });
    onBeforeUnmount(() => {
        window.removeEventListener('resize', resizeFun);
    });
</script>

<style lang="scss" scoped>
    .home {
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
        background-color: rgb(247, 250, 252);
    }
    .avatar {
        width: 80px;
        height: 80px;
    }
    .card-content {
        display: flex;
        .card-content-1 {
            // width: 70%;
            flex: 1;
        }
        .card-content-2 {
            width: 15%;
            margin-left: 20px;
            background: linear-gradient(to bottom, rgb(89, 192, 255) 0%, white 50%, white 100%);
            border-radius: 3%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .person-information-1 {
                padding-top: 20px;
            }
        }
    }
    .card-box-1 {
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
        border-radius: 3%;
        display: flex;
        justify-content: space-between;
        text-align: left;
        color: #fff;
        background-color: #fff;
        .card-item {
            background-image: linear-gradient(to right bottom, rgb(236, 71, 134), rgb(185, 85, 164));
            box-sizing: border-box;
            border-radius: 3%;
            padding: 10px;
            width: 24%;
            overflow: hidden;
            .card-item-title {
                font-size: 18px;
            }
            .card-item-main {
                box-sizing: border-box;
                padding-top: 50px;
                display: flex;
                justify-content: space-between;
            }
            .card-item-icon {
                font-size: 80px;
            }
            .card-item-num {
                font-size: 30px;
                align-self: flex-end;
            }
        }
    }
    .card-box-2 {
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
        margin-top: 20px;
        border-radius: 3%;
        background-color: #fff;
    }
    .card-box-2-box {
        display: flex;
        // justify-content: space-between;
        .card-2-box {
            color: #fff;
            box-sizing: border-box;
            border-radius: 50%;
            padding: 10px;
            margin: 0 20px;
            width: 100px;
            overflow: hidden;
            .card-2-icon {
                font-size: 80px;
            }
        }
        .card-2-title {
            font-size: 18px;
            padding-top: 20px;
        }
    }
    .tip {
        width: 100%;
        display: flex;
        align-items: center;
    }
    .tip-icon {
        font-size: 20px;
    }
    .tip-title {
        padding-left: 2px;
        font-size: 16px;
    }
    .chart-content {
        margin-top: 20px;
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
        border-radius: 3%;
        text-align: left;
        background-color: #fff;
        color: #000;

        .chart-main-1 {
            display: flex;
        }
        .chart-main-2 {
            display: flex;
        }
    }
    .divider {
        margin-top: 10px;
    }
    .pagination {
        padding-top: 10px;
    }
    .my-table {
        width: 100%;
        flex: 1;
    }
    // tableRowClassName写的自定义样式
    .my-table :deep(.warning-row) {
        --el-table-tr-bg-color: var(--el-color-warning-light-9);
    }
    .my-table :deep(.success-row) {
        --el-table-tr-bg-color: var(--el-color-success-light-9);
    }
    .btn-padding-bottom {
        padding-bottom: 10px;
    }
</style>
